<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Baggage calculator</title>
  		<script type='text/javascript' src='/Baggage/dwr/engine.js'></script>
  		<script type='text/javascript' src='/Baggage/dwr/util.js'></script>
  		<script type='text/javascript' src='/Baggage/dwr/interface/service.js'></script>
		<style>
			body {
				background: url(newPage.png) no-repeat center center fixed;
                -webkit-background-size: cover;
				-o-background-size: cover;                
				background-size: cover;
			}
		</style>
	</head>
	<body>
	<div><p style="text-align:center;"><font size=6>NATIONAL FLIGHT BAGGAGE CALCULATOR</font></p></div> 
	<div>
	<strong>Route</strong>
	<select id="Route" name="Route">
	<option value="0">In_country</option>
	<option value="1">Route_1</option>
	<option value="2">Route_2</option>
	<option value="3">Route_3</option>
	<option value="4">Route_4</option>
	<option value="5">Route_5</option>
	</select>
	</div>
	<div><font color=ffffff>have</font></div>
	<div>
	<strong>Seat</strong>
	<select id="seat" name="seat">
	<option value="0">FCC</option>
	<option value="1">BCC</option>
	<option value="2">SCC</option>
	<option value="3">ECC</option>
	</select>
	</div>
	<div><font color=ffffff>a</font></div>
	<div>
	<strong>Year</strong>
	<select id="PID" name="PID">
	<option value="0">Adult</option>
	<option value="1">Child</option>
	<option value="2">Baby</option>
	</select>
	</div>
	<div><font color=ffffff>nice</font></div>
	<div>
	<strong>card</strong>
	<select id="card" name="card">
	<option value="0">All-life</option>
	<option value="1">Gold&Silver</option>
	<option value="2">Star</option>
	</select>
	</div>
	<div><font color=ffffff>trip</font></div>
	<div>
	<strong>    Ticket Price</strong>
	<input οnkeyup="value=value.replace(/[^\d]/g,'') " 
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" 
ID="price" NAME="price"></div>
 	<div></div>BAGGAGE
 	<div>
 	<form>
        <table id=init_table border="1" width="250px">
            <tr>
                <th >Index</th>
                <td> <input type="text" id="index" /></td>
            </tr>
            <tr>
                <th>long(cm)</th>
                <td> <input type="text" name="long" id="long" /></td>
                </th>
            </tr>
            <tr>
                <th>width(cm)</th>
                <td> <input type="text" name="width" id="width" /></td>
            </tr>
            <tr>
                <th>height(cm)</th>
                <td> <input type="text" name="height" id="height" /></td>
            </tr>
            <tr>
                <th>weight(kg)</th>
                <td> <input type="text" name="weight" id="weight" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="reset" value="reset" align="center" />
                    <input type="button" value="add" align="center" onclick="create_Table()"/>
                </td>
            </tr>
        </table>
    </form>
    </div>
    
 	<div>
 	<input type="button" id="confirm" name="confirm" value="confirm" onclick="PassValue()"/>
 	</div>
 	
 	<div><font color=ffffff><strong>Final Baggage Price</strong></font>
 	<input id="result" type="text" name="result" />	
 	</div>
 	<table  id="tab" border="1" align="center" width="350" style="position: absolute;left: 570px;top: 150px">
        <thead>
        <tr id="list">
            <th>choose</th>
            <th>Index</th>
            <th>long</th>
            <th>width</th>
            <th>height</th>
            <th>weight</th>
        </tr>
        <tr>
            <td ><input type="checkbox" onclick="checkAll(this)" /></td>
            <td colspan="6" ><a href="javascript:void(0)" onclick="delAll()">DeleteAll</a></td>
        </tr>
        </thead>
        <tbody id="listbody"></tbody>
    </table>
	<script type="text/javascript">
			var final_result=-1;
			var tableNode;
			function create_Table() {
		        var table=document.getElementById("tab");
		        var number=(document.getElementById("index")).value;
		        var height=(document.getElementById("long")).value;
		        var width=(document.getElementById("width")).value;
		        var depth=(document.getElementById("height")).value;
		        var weight=(document.getElementById("weight")).value;
		        var tr = document.createElement("tr");
		        
		        var td1 = document.createElement("td");
		        var input = document.createElement("input");
		        input.setAttribute("type","checkbox");
		        input.setAttribute("name","item");
		        td1.appendChild(input);
		
		        var td2 = document.createElement("td");
		        td2.innerHTML = number;
		
		        var td3 = document.createElement("td");
		        td3.innerHTML = height;
		
		        var td4 = document.createElement("td");
		        td4.innerHTML = width;
		
		        var td5 = document.createElement("td");
		        td5.innerHTML = depth;
		
		        var td6 = document.createElement("td");
		        td6.innerHTML = weight;
		
		        var td7 = document.createElement("td");
		        var a = document.createElement("a");
		
		        a.setAttribute("href","javascript:void(0)");//相当于让href属性失效！
		        a.setAttribute("onclick","delone(this)")
		        a.innerHTML = "delete";
		        td7.appendChild(a);
		        //将创建的td添加到tr中
		        tr.appendChild(td1);
		        tr.appendChild(td2);
		        tr.appendChild(td3);
		        tr.appendChild(td4);
		        tr.appendChild(td5);
		        tr.appendChild(td6);
		        tr.appendChild(td7);
		        //使用appendChild（tr）方法，将tr添加到listbody中
		        //其中获取的listbody是要将表格添加的位置的id
		        var listbody = document.getElementById("listbody");
		        listbody.appendChild(tr);
		    };
		  
		  
		    function delone(d){
		        var tr = d.parentNode.parentNode;
		        var listbody  = document.getElementById("listbody");
		        listbody.removeChild(tr);
		    };
		    
		    function checkAll(c){
		        //得到全选按钮的状态
		        var status = c.checked;
		        //得到name=item的标签
		        var items = document.getElementsByName("item");
		        for(var i=0;i<items.length;i++){
		            //将全选按钮的状态给所有的items
		            items[i].checked=status;

		        }
		    };
		    //删除选中部分，注意变量，每删除一个，要将变量减一，否则，将导致变量溢出，浏览器死机
		    function delAll(){

		        var list = document.getElementById("listbody");
		        //拿到所有的item
		        var items = document.getElementsByName("item");
		        for(var j=0;j<items.length;j++){

		            if(items[j].checked)//如果item被选中
		            {

		                var tr = items[j].parentNode.parentNode;
		                list.removeChild(tr);
		                j--;
		            }
		        }
		    };

		    function PassValue(){
				  var elem_2=document.getElementById("seat");//获取�
				  var Value_2 = parseInt(elem_2.options[elem_2.selectedIndex].value);//获得选中的option的value
				  var elem_0=document.getElementById("PID");//获取控件
				  var Value_0 = parseInt(elem_0.options[elem_0.selectedIndex].value);//获得选中的option的value
				  var elem_1=document.getElementById("card");//获取控件
				  var Value_1 = parseInt(elem_1.options[elem_1.selectedIndex].value);//获得选中的option的value
				  var elem_3=document.getElementById("Route");//获取控件
				  var Value_3 = parseInt(elem_3.options[elem_3.selectedIndex].value);//获得选中的option的value
				  var price=document.getElementById("price").value;//获取机票价格
				  price=price.toString();//转String
				  var table_tt=document.getElementById("tab");
				  var row=table_tt.rows.length;
				  var data=[];
				  for(var i=2;i<row;i++)
				  {
					  var col=table_tt.rows[i].cells.length;
					  for(var j=1;j<col-1;j++)
					  {
						  if(!data[i-2])
						  {
							  data[i-2] = new Array();
						  }
						  data[i-2][j-1] = parseInt(table_tt.rows[i].cells[j].innerHTML);
						  
					  }
				  }
				  test(Value_0,Value_1,Value_2,Value_3,price,data);
				  //service.testSimple(callback);
				  //service.ReturnResult(Value_0,Value_1,Value_2,Value_3,price,data,callback);
				  //document.getElementById('result').value=res+"";
			};
		    function test( a, b, c, d, e, f)
		    {
		    	service.ReturnResult(a,b,c,d,e,f,callback);
		    	return final_result;
		    };
		    
		    function callback(dat)
		    {
		    	document.getElementById('result').value=dat+"";
		    	final_result=dat;
		    };
		  
	</script>
</body>
</html>
